<template>
  <div class="app-container">
    <div class="main-header">
      <h2 class="main-title">学生问题统计</h2>
    </div>
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-content">
          <h3 class="stat-title">总关键词数</h3>
          <p class="stat-number blue">321</p>
          <p class="stat-desc">29个不同关键词</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-content">
          <h3 class="stat-title">学业类</h3>
          <p class="stat-number green">116</p>
          <p class="stat-desc">学习相关问题</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-content">
          <h3 class="stat-title">情感类</h3>
          <p class="stat-number purple">103</p>
          <p class="stat-desc">心理健康相关</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-content">
          <h3 class="stat-title">其他类</h3>
          <p class="stat-number orange">72</p>
          <p class="stat-desc">生活服务等</p>
        </div>
      </div>
    </div>

    <!-- 词云图区域 -->
    <div class="word-cloud-section">
      <h2 class="section-title">问题关键词词云图</h2>
      <p class="section-desc">所有对话中出现的关键词统一展示。字体大小代表关键词出现频率，颜色用于区分不同词汇类型。</p>

      <div class="word-cloud-container">
        <div
            v-for="word in keywords"
            :key="word.text"
            :class="['word-item', `color-${word.color}`]"
            :style="{
            fontSize: word.size + 'px',
            top: word.top + '%',
            left: word.left + '%'
          }"
        >
          {{ word.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

// 关键词数据
const keywords = ref([
  { text: '学习压力', size: 42, color: 'blue', top: 20, left: 50 },
  { text: '焦虑', size: 32, color: 'green', top: 15, left: 80 },
  { text: '考试', size: 36, color: 'orange', top: 35, left: 25 },
  { text: '数学', size: 28, color: 'cyan', top: 40, left: 12 },
  { text: '老师', size: 24, color: 'red', top: 42, left: 8 },
  { text: '英语', size: 24, color: 'orange', top: 38, left: 18 },
  { text: '兼职', size: 20, color: 'green', top: 18, left: 72 },
  { text: '系统', size: 20, color: 'orange', top: 12, left: 45 },
  { text: '图书馆', size: 20, color: 'orange', top: 8, left: 35 },
  { text: '会合', size: 20, color: 'cyan', top: 45, left: 20 },
  { text: '孤独', size: 24, color: 'green', top: 48, left: 32 },
  { text: '选课', size: 22, color: 'orange', top: 58, left: 18 },
  { text: '成绩', size: 24, color: 'orange', top: 62, left: 10 },
  { text: '通知', size: 18, color: 'cyan', top: 70, left: 12 },
  { text: '人际关系', size: 26, color: 'orange', top: 55, left: 45 },
  { text: '室友', size: 32, color: 'purple', top: 52, left: 60 },
  { text: '牵友', size: 24, color: 'orange', top: 48, left: 52 },
  { text: '活动', size: 20, color: 'cyan', top: 52, left: 68 },
  { text: '恋爱', size: 22, color: 'cyan', top: 68, left: 45 },
  { text: '焦虑', size: 38, color: 'green', top: 72, left: 58 },
  { text: '压力', size: 20, color: 'cyan', top: 78, left: 40 },
  { text: '食堂', size: 20, color: 'cyan', top: 78, left: 48 },
  { text: '校园卡', size: 20, color: 'red', top: 62, left: 42 },
  { text: '社团', size: 20, color: 'red', top: 65, left: 35 },
  { text: '自信', size: 22, color: 'orange', top: 60, left: 75 },
  { text: '家庭', size: 22, color: 'red', top: 48, left: 82 },
  { text: '作业', size: 20, color: 'gray', top: 38, left: 78 },
  { text: '情绪', size: 22, color: 'orange', top: 82, left: 72 }
]);

export default {
  setup() {
    return {
      keywords
    };
  }
};
</script>

<style scoped>
/* 引入更现代的字体（如Inter，需确保项目中已配置或使用系统默认无衬线字体） */
@font-face {
  font-family: 'Inter';
  src: local('Inter'), local('Inter-Regular'), url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.main-header {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.main-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}
/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.stat-content {
  text-align: center;
}

.stat-title {
  font-size: 13px;
  color: #7f8c8d;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.stat-number {
  font-size: 30px;
  font-weight: 700;
  margin: 4px 0;
  line-height: 1;
}

.stat-number.blue { color: #3498db; }
.stat-number.green { color: #2ecc71; }
.stat-number.purple { color: #9b59b6; }
.stat-number.orange { color: #f39c12; }

.stat-desc {
  font-size: 12px;
  color: #95a5a6;
  margin: 8px 0 0 0;
}

/* 词云图区域 */
.word-cloud-section {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  margin-top: 16px;
}

.section-title {
  font-size: 19px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.section-desc {
  font-size: 13px;
  color: #7f8c8d;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

/* 词云容器 */
.word-cloud-container {
  position: relative;
  width: 100%;
  height: 420px;
  background: linear-gradient(135deg, #fdfdfd 0%, #f5f5f5 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.03);
}

/* 词云单词 */
.word-item {
  position: absolute;
  white-space: nowrap;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  animation: fadeIn 0.6s ease-out;
}

.word-item:hover {
  transform: scale(1.12);
  filter: brightness(1.15);
  z-index: 10;
}

/* 颜色类 */
.color-blue { color: #3498db; }
.color-green { color: #2ecc71; }
.color-purple { color: #9b59b6; }
.color-orange { color: #f39c12; }
.color-red { color: #e74c3c; }
.color-cyan { color: #1abc9c; }
.color-gray { color: #7f8c8d; }

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 响应式 */
@media (max-width: 768px) {
  .app-container {
    padding: 16px 12px;
  }

  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-number {
    font-size: 26px;
  }

  .word-cloud-section {
    padding: 20px 16px;
  }

  .word-cloud-container {
    height: 350px;
  }

  .section-title {
    font-size: 16px;
  }

  .section-desc {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }

  .word-cloud-container {
    height: 300px;
  }

  .word-item {
    font-size: 0.75em !important;
  }
}
</style>